<template>
	<SectionFrame :title="title" :more="true" @more="getMore">
		<template #default>
			<!-- 歌单列表 -->
			<scroll-view class="section-card__main" :scroll-x="true" :enable-flex="true">
				<view class="section-card__main-spacing-left" :class="{ 'playlist-scroll-show': data.scrollList.length > 0 }">
					<!-- 滚动歌单列表 -->
					<!-- <section-frame-scroll class="section-card__main-spacing-scroll" v-if="data.scrollList.length > 0" :list="props.data.scrollList" /> -->

					<!-- 歌单列表 -->
					<template v-for="(item, idx) in data.list">
						<!-- ！！！ key不能在template，所以用在子元素上 -->
						<SectionFramePlaylistItem :class="{ 'playlist-item-last': data.list.length - 1 === idx }" :data="item"  :key="`section-card-${idx}`"/>
					</template>
				</view>
			</scroll-view>
		</template>
	</SectionFrame>
</template>

<script>
export default {
	name:"SectionPlaylist",
	data() {
		return {

		};
	},
	props:{
		title: {
		      type: String,
		      required: true
		    },
		data: {
		      type: Object,
		      default: function() {
		        return {
		          list: [],
		          scrollList: []
		        };
		      }
		    },
	},
	methods:{
		getMore(){
			this.$emit('more')
		}
	}
}
</script>

<style lang="scss" scoped>
// 歌单列表栏 scroll-view
.section-card__main {
  // 单项的宽度、封面宽高
  --item-size: 211.5rpx;

  // 单项之间的间距
  --item-spacing: 9.6rpx;

  white-space: nowrap;
  margin-top: 12rpx;

  .playlist-scroll-show {
    // padding-left: calc(var(--item-size) + var(--item-spacing) * 2);
  }

  .section-card__main-spacing-left {
    position: relative;
    margin-left: calc(var(--page-spacing) - var(--item-spacing));
    .section-card__main-spacing-scroll {
      position: absolute;
      top: 0;
      left: 0;
    }
    // 最后一项
    .playlist-item-last {
      margin-right: var(--page-spacing);
      position: relative;
    }
  }
}
</style>
